<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  <meta content=always name=referrer>
  <link rel="stylesheet" type="text/css" href="__STATIC__/css/style_user.css">
  <script src="__STATIC__/js/jquery-1.8.2.js"></script>
  <title>{if condition="input('uid')"}注册{else/}登录{/if}</title>
  <script>
    $(function(){
      $(".tablist li").click(
          function(){
            var a=$(".tablist li").index(this);
            $(this).addClass("cur");
            $(this).siblings().removeClass("cur");
            $(".tabcon>div").eq(a).css({display:"block"});
            $(".tabcon>div").eq(a).siblings().css({display:"none"});
            $('#login').find('input').not('.log').val('');
            $('#registers').find('input').not('.reg').val('');
          }
      )
    })
  </script>
  <style>
    input[type=button],input[type=text],input[type=password]{-webkit-appearance:none;outline:none}
  </style>
</head>
<body>
<div class="wrap-login">
  <div class="header">
    <img src="__STATIC__/img-wap/bg-my.png" class="bg">
    <input type="hidden" id="uid" value="{:input('uid','')}" />
    <div class="logo">
      <a href="{:url('mobile/user_port/index')}"><img src="__STATIC__/img_user/web_log.png"></a>
      <!--<p><a>LOGO</a></p>-->
      <!--<p><a href="{:url('mobile/user_port/index')}">喜利在线</a></p>-->
    </div>
    <a href="javascript:jump_about_us();" style="color: white;position: absolute;top:10%;left:5%;font-size: 12px;z-index: 10;">关于我们</a>
    <div class="tablist">
      <ul>
        <li {if condition="!input('?uid')"}class="cur"{/if}><a href="#">登录</a></li>
        <li {if condition="input('?uid')"}class="cur"{/if} id="register"><a href="#">注册</a></li>
      </ul>
    </div>
  </div>
  <div class="tabcon">
    <!--登录开始-->
    <div id="login" {if condition="!input('?uid')"} class="cur" {/if} >
    <div>
      <form action="" method="post" id="form_1" >
        <div class="text">
          <label>账号</label><input type="number" maxlength="11" min="1" name="username" {eq name="mm" value="1" }value="{$user}"{/eq} placeholder="账号" nullmsg="账号不能为空" datatype="*" errormsg="">
        </div>
        <div class="text">
          <label>密码</label><input type="password" placeholder="密码" name="password" {eq name="mm" value="1" }value="123456"{/eq} id="pwd1" nullmsg="密码不能为空" datatype="*">
          <img src="__STATIC__/img_user/dl-mimab.png" id="p_1" onclick="toggle(1)">
        </div>
        <input type="submit" value="登录" id="sub_1" class="submit log">
        <p class="find">
          <a href="{:url('mobile/user_port/find_pwd')}">找回密码</a>
          <input type="checkbox" name="remember" {eq name="mm" value="1" }checked value="1"{/eq}> <a style="margin: 3% 1%;">记住密码</a>
        </p>

      </form>
    </div>
  </div>
  <!--登陆结束-->
  <!--注册开始-->

  <div id='registers' {if condition="input('?uid')"} class="cur" {/if}  >

  <form onsubmit="return false" action="" method="post" id="form_2">
    <div class="text">
      <label>账号</label><input type="number" maxlength="11" min="1" placeholder="账号" nullmsg="账号不能为空" name="username" id="un2" datatype="m" errormsg="账号格式不对(应为手机号)">
    </div>
    <div class="text">
      <label>昵称</label><input type="text" placeholder="昵称" nullmsg="昵称不能为空" name="nickname" datatype="s4_20" errormsg="昵称格式不正确">
    </div>
    <input type="hidden" name="invit_id"  value="{:input('uid')}" />
    <div class="text">
      <label>验证码</label><input type="text" placeholder="验证码" nullmsg="请输入6位验证码" name="yzm" datatype="n6" id="yzm2" errormsg="验证码格式不正确">
      <span><a href="javascript:check_num();" id="yzm_2">获取验证码</a></span>
    </div>
    <div class="text">
      <label>密码</label><input type="password" placeholder="密码 (6到18位)" id="pwd2" datatype="s6-18" name="password" nullmsg="密码不能为空" errormsg="密码格式不正确" >
      <img src="__STATIC__/img_user/dl-mimab.png" id="p_2" onclick="toggle(2)">
    </div>
    <input type="submit" value="注册" class="submit reg" id="sub_2">
  </form>
</div>
<!--注册结束-->
</div>
<div class="type">
  <!--<div class="or">-->
  <!--<div><img src="__STATIC__/img_user/line.png"><span> OR </span><img src="__STATIC__/img_user/line.png"></div>-->
  <!--</div>-->
  <ul>
    <li style="margin-left: 44%"  >
      <a href="{$wx_url}"><img src="__STATIC__/img_user/dl-weixin.png"><br><span>微信</span></a>
    </li>

  </ul>

</div>

</div>
{include file="public/src" /}
<script>
  //验证表单元素
  $(function () {
    $.Tipmsg.r = null;
    $.Tipmsg.p = null;
    $.Datatype.n6 = /^\d{6}$/;
    $.Datatype.s4_20 = /^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{2,20}$/;
    var demo1 = $("#form_1").Validform({
      btnSubmit:'#sub_1',
      tiptype: function (msg) {
        layer.open({content: msg, skin: 'msg', time:2});
      },
      tipSweep: true,
      ajaxPost:true,
      callback:function(t){
        if (t.code == 200){
          layer.open({content:t.message,skin:'msg',time:3});
          setTimeout(function () {
            window.location.href = "{:url('mobile/user_port/index')}";   //跳转到主页
          },2000);
        }else if(t.code == 201){  //去绑定手机号
          layer.open({content:t.message,skin:'msg',time:3});
          window.location.href = "{:url('mobile/user_info/bind_small_phone')}";
        } else {
          layer.open({content:t.message,skin:'msg',time:2});
        }
      }
    });
    demo1.config({
      ajaxpost:{
        error: function () {
          layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
        }
      }
    });
    var demo2 = $("#form_2").Validform({

      tiptype: function (msg) {
        layer.open({content: msg, skin: 'msg', time:2});
      },
      btnSubmit:'#sub_2',
      tipSweep: true,
      ajaxPost:true,
      callback:function(t){
        layer.open({content:t.message,skin:'msg',time:3});
        if (t.code == 200){
          //跳转到个人信息
          window.location.href = "{:url('mobile/user_port/index')}";
        }
      }
    });
    demo2.config({
      url:"register",
      ajaxpost:{
        error: function () {
          layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
        }
      }
    });
  });
  //隐藏虚拟键盘

  //切换密码的可视类型
  function toggle(id){
    var type = $('#pwd'+id);
    if (type.prop('type') == 'text'){
      type.prop('type','password');
      $('#p_'+id).prop('src','__STATIC__/img_user/dl-mimab.png');
    }else {
      type.prop('type','text');
      $('#p_'+id).prop('src','__STATIC__/img_user/dl-mima.png');
    }
  }
  //发送验证码
  function check_num(){
    var tel = $("#un2").val();
    if (tel == ''){
      layer.open({content: '请输入注册账号', skin: 'msg', time:2});
      return false;
    }
    if (!(/^1(3|4|5|7|8)\d{9}$/.test(tel))){
      layer.open({content: '账号格式不正确', skin: 'msg', time:2});
      return false;
    }
    if (!check_unique(tel)){
      return false;
    }

    count_down();
    $.ajax({
      url:"{:url('mobile/shop_set/get_code')}",
      dataType:'json',
      type:'post',
      data:{'tel':tel,'act':'reg'},
      success:function(t){
        layer.open({content:'发送成功',skin:'msg',time:2});
      }
    })
  }
  //验证码倒计时
  function count_down(){
    var num = 60;
    var verif = $('#yzm_2');
    var timer = setInterval(function(){
      verif.text(num+'秒');
      if (num <=60 && num >= 1){
        verif.removeAttr('href');
      }else{
        verif.text('重新获取验证码');
        window.clearInterval(timer);
        verif.attr("href",'javascript:check_num(this.id);');
      }
      num--;
    },1000);
  }
  //检测注册手机号码的唯一性
  function check_unique(tel){
    var flag = true;
    $.ajax({
      url:"{:url('mobile/shop_set/check_bind_tel')}",
      type:'post',
      async:false,
      dateType:'json',
      data:{'tel':tel},
      success:function(t){
        if (t.code != 200){
          layer.open({content: t.message,skin: 'msg',time:2});
          flag = false;
        }
      }
    });
    return flag;
  }

  function jump_about_us() {
    sessionStorage.setItem('about_us_url',window.location.href);
    window.location.href="{:url('mobile/user_info/user_about_us')}";
  }
</script>
</body>
</html>